<template>
	<view class="content">
		<!-- <view class="block search-block">
			<Search class="search-components"></Search>
		</view> -->
		<Swiper1 :styleObj="{width: '100%',height: '400rpx',borderRadius: '0'}" :list="swiperList"></Swiper1>
		<view class="block menu-block">
			<view @click="menuJump(item.url,item.id)" v-for="(item,index) in menu" :key="item.id" class="menu-item">
				<image :src="item.icon" class="menu-icon"></image>
				<view class="menu-name">{{item.value}}</view>
			</view>
		</view>
		<image @click="jump" mode="widthFix" class="consulting" src="/static/home/consulting.jpg"></image>
		<view class="block list-block">
			<view class="list-tab-block">
				<view v-for="(item,index) in tab" :key="item.id" :class="tabActive==item.id?'active':''"
					@click="tabActive=item.id" class="list-tab-item">{{item.value}}</view>
			</view>
			<view class="list-content-block">
				<LightBox v-if="tabActive==1" :data="lightBox"></LightBox>
				<view class="list-content">
					<view class="list-col">
						<navigator hover-class="none" :url="'/pages/Vlog/detail?id='+item.id"
							v-for="(item,index) in list.colA" :key="item.id" class="list-item">
							<view class="photo-block">
								<image mode="widthFix" class="photo" :src="item.imgList[0].imgUrl"></image>
								<view v-if="item.position" class="position">
									<view class="iconfont icon-weizhi"></view>{{item.position}}
								</view>
							</view>
							<view class="title">{{item.title}}</view>
							<view class="user">
								<image class="user-photo" :src="item.customer.faceUrl"></image>
								<view class="user-name">{{item.customer.notName}}</view>
								<view class="iconfont icon-zan"></view>
								<view class="view-count">{{item.fabulous}}</view>
							</view>
						</navigator>
					</view>
					<view class="list-col">
						<navigator hover-class="none" :url="'/pages/Vlog/detail?id='+item.id"
							v-for="(item,index) in list.colB" :key="item.id" class="list-item">
							<view class="photo-block">
								<image mode="widthFix" class="photo" :src="item.imgList[0].imgUrl"></image>
								<view v-if="item.position" class="position">
									<view class="iconfont icon-weizhi"></view>{{item.position}}
								</view>
							</view>
							<view class="title">{{item.title}}</view>
							<view class="user">
								<image class="user-photo" :src="item.customer.faceUrl"></image>
								<view class="user-name">{{item.customer.notName}}</view>
								<view class="iconfont icon-zan"></view>
								<view class="view-count">{{item.fabulous}}</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getListApi
	} from '@/api/vlog.js'
	export default {
		data() {
			return {
				swiperList: [{
						id: 1,
						imgUrl: 'https://ysz.gshwsc.com/api/file/img/20220928172703.jpg'
					},
					{
						id: 2,
						imgUrl: 'https://ysz.gshwsc.com/api/file/img/20220928172559.jpg'
					},
					{
						id: 3,
						imgUrl: 'https://ysz.gshwsc.com/api/file/img/20220928172708.jpg'
					},
					{
						id: 4,
						imgUrl: 'https://ysz.gshwsc.com/api/file/img/10001.png'
					},
				],
				menu: [{
						id: 1,
						value: '大美肃州',
						icon: '/static/home/e49ec9aad809a3febf90a92b5fe4a55.png',
						url: '/pages/beauty/beauty'
					},
					{
						id: 2,
						value: '景点门票',
						icon: '/static/home/1.png',
						url: '/pages/attractions/index'
					},
					{
						id: 3,
						value: '小吃美食',
						icon: '/static/home/2.png',
						url: '/pages/food/index'
					},
					{
						id: 4,
						value: '酒店民宿',
						icon: '/static/home/3.png',
						url: '/pages/hotel/index'
					},
					{
						id: 5,
						value: '旅游服务',
						icon: '/static/home/4.png',
						url: '/pages/tourism_service/index'
					},
					{
						id: 6,
						value: '买特产',
						icon: '/static/home/5.png',
						url: '/pages/specialties/specialties'
					},
					{
						id: 7,
						value: '乡村旅游 ',
						icon: '/static/home/6.png',
						url: '/pages/rural_tourism/index'
					},
					{
						id: 8,
						value: '边走边听',
						icon: '/static/home/7.png',
						url: '/pages/walk_while_listening/index'
					},
					{
						id: 9,
						value: '视频赏析',
						icon: '/static/home/11.png',
						url: '/pages/video_appreciation/index'
					}, {
						id: 10,
						value: '这里是肃州',
						icon: '/static/home/12.png',
						url: '/pages/article/index?typeName=1&name=这里是肃州'
					},

					{
						id: 11,
						value: '非遗项目',
						icon: '/static/home/a5f8f6b9202d6e31f948d88aea99916.png',
						url: '/pages/article/index?typeName=4&name=非遗项目'
					},
					{
						id: 12,
						value: '招商引资',
						icon: '/static/home/9.png',
						url: '/pages/article/index?typeName=3&name=招商引资'
					},


					// {
					// 	id: 12,
					// 	value: '更多 ',
					// 	icon: '/static/home/10.png',
					// 	url: ''
					// },
				],
				tab: [
					// {
					// 	id: 1,
					// 	value: '推荐'
					// },
					// {
					// 	id: 2,
					// 	value: '景点'
					// },
					// {
					// 	id: 3,
					// 	value: '名胜古迹'
					// },
					// {
					// 	id: 4,
					// 	value: '公园游乐园'
					// },
					// {
					// 	id: 5,
					// 	value: '清凉玩水'
					// },
					// {
					// 	id: 6,
					// 	value: '展馆展览'
					// },
				],
				tabActive: 1,
				lightBox: [{
						id: 1,
						name: '富康天宝大景区',
						score: 4.7,
						type: '酒泉超高人气榜',
						describe: '富康购物中心商圈',
						photo: 'https://ysz.gshwsc.com/api/file/img/banner1.jpg',
						url: '/pages/attractions/tickets?id=27'
					},
					{
						id: 2,
						name: '富康天宝大景区',
						score: 4.7,
						type: '酒泉超高人气榜',
						describe: '富康购物中心商圈',
						photo: 'https://ysz.gshwsc.com/api/file/img/banner2.jpg',
						url: '/pages/attractions/tickets?id=27'
					},
					{
						id: 3,
						name: '富康天宝大景区',
						score: 4.7,
						type: '酒泉超高人气榜',
						describe: '富康购物中心商圈',
						photo: 'https://ysz.gshwsc.com/api/file/img/banner3.jpg',
						url: '/pages/attractions/tickets?id=27'
					},
					{
						id: 4,
						name: '富康天宝大景区',
						score: 4.7,
						type: '酒泉超高人气榜',
						describe: '富康购物中心商圈',
						photo: 'https://ysz.gshwsc.com/api/file/img/banner4.jpg',
						url: '/pages/attractions/tickets?id=27'
					},
					{
						id: 5,
						name: '富康天宝大景区',
						score: 4.7,
						type: '酒泉超高人气榜',
						describe: '富康购物中心商圈',
						photo: 'https://ysz.gshwsc.com/api/file/img/banner5.jpg',
						url: '/pages/attractions/tickets?id=27'
					},
				],
				list: {
					colA: [],
					colB: []
				}
			}
		},
		methods: {
			jump() {
				uni.navigateTo({
					url: '/pages/article/index?typeName=2'
				})
			},
			menuJump(url, id) {
				if (url) {
					uni.navigateTo({
						url: url + '?id=' + id
					})
				} else {
					this.utils.showDevelopingTips();
				}
			},
			getList() {
				getListApi({
					page: 1,
					limit: 0
				}).then((res) => {
					if (res.code == 1) {
						this.list.colA = res.dataA
						this.list.colB = res.dataB
					} else {
						uni.showToast({
							title: '加载失败',
							mask: true,
						})
					}
				}).catch((res) => {
					uni.hideLoading();
					uni.showToast({
						title: '加载失败',
						mask: true,
					})
				})
			},

		},
		onLoad() {

		},
		onShow() {
			this.getList();

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;

		.block {
			display: flex;
			width: 100%;
		}

		.block.search-block {
			.search-components {
				width: 100%;
			}

			padding: 30rpx;
		}

		.consulting {
			width: calc(100% - 40rpx);
			margin: 0 auto;
			height: auto;
			border-radius: 20rpx;
		}

		.block.menu-block {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 40rpx;
			padding: 0 30rpx;

			.menu-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 40rpx;

				.menu-icon {
					width: 90rpx;
					height: 90rpx;
				}

				.menu-name {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: $color-regular-text;
				}
			}
		}

		.block.list-block {
			width: 100%;
			box-shadow: 0 -5px 15px 0px rgba(0, 0, 0, 0.08);
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			flex-direction: column;

			.list-tab-block {
				width: 100%;
				overflow-x: scroll;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 40rpx;
				margin-bottom: 20rpx;

				.list-tab-item {
					color: $color-regular-text;
					font-size: 30rpx;
					flex: none;
					margin-right: 40rpx;
					display: flex;
					align-items: center;
					height: 90rpx;
				}

				.list-tab-item.active {
					font-size: 34rpx;
					color: $color-primary-text;
					font-weight: bold;
					background: url('@/static/home/tab_active.png') no-repeat bottom center;
					background-size: 60rpx;
				}
			}

			.list-tab-block::-webkit-scrollbar {
				display: none;
			}

			.list-content-block {
				width: 100%;
				padding: 0 20rpx;

				.list-content {
					width: 100%;
					display: flex;
					flex-direction: row;
					margin-top: 20rpx;
					padding-bottom: 20rpx;

					.list-col {
						width: calc(50% - 10rpx);
						margin-right: 20rpx;
						display: flex;
						flex-direction: column;

						.list-item {
							width: 100%;
							display: flex;
							flex-direction: column;
							margin-bottom: 20rpx;

							.photo-block {
								width: 100%;
								position: relative;
								display: flex;
								flex-direction: row;

								.photo {
									border-radius: 20rpx;
									width: 100%;
								}

								.position {
									position: absolute;
									bottom: 20rpx;
									left: 20rpx;
									color: #fff;
									font-size: 24rpx;
									display: flex;

									.iconfont {
										margin-right: 10rpx;
									}
								}
							}

							.user {
								margin-top: 10rpx;
								display: flex;
								flex-direction: row;
								width: 100%;
								align-items: center;

								.user-photo {
									width: 40rpx;
									height: 40rpx;
									margin-right: 10rpx;
									border-radius: 50%;
								}

								.user-name {
									font-size: 24rpx;
									color: $color-secondary-text;
									flex-grow: 1;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.iconfont,
								.view-count {
									font-size: 24rpx;
									color: $color-secondary-text;
								}
							}
						}

						.list-item:last-child {
							margin-bottom: 0;
						}
					}

					.list-col:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>